<template>
  <section class="enterprises">
    <section class="body">
      <section class="title">
        首页模板选择
      </section>
    </section>
    <section class="template-container">
      <section class="template-left">
        <section class="template-box">
            <el-radio v-model="radio1" label="1" class="radio-box">模板一</el-radio>
            <p class="template-index">首页</p>
            <section class="template-box-banner">
                <section class="template-banner">
                    <p>banner</p>
                </section>
            </section>
            <el-row type="flex" justify="space-around" class="template-grid">
                <el-col :span="6" class="grid-box" v-for="(item, index) in dataList" :key="index">
                    <el-row type="flex" justify="center">
                        <el-col class="grid-clom"></el-col>
                    </el-row>
                    <p>{{item.name}}</p>
                </el-col>
            </el-row>
            <section class="img-text">
                <el-row class="img-box" type="flex" justify="space-between" align="middle">
                    <el-col :span="16">
                        <h1>离开麦肯锡后，外面的世界很性感吗？</h1>
                        <p class="text-middle">长春和苏州的获批里程也不算太长。长春为8条线路，总长度135.4公里；苏州4条线路，线路总长137公里。</p>
                        <p class="text-read">
                            <i class="el-icon-star-on"><span>1231</span></i>
                            <i class="el-icon-star-off"><span>1231</span></i>
                        </p>
                    </el-col>
                    <el-col :span="8">
                        <div style="text-align:right">
                            <img src="../../../assets/u1049.png" style="height:120px" alt="">
                        </div>
                    </el-col>
                </el-row>
                <el-row class="img-box" type="flex" justify="space-between" align="middle">
                    <el-col :span="16">
                        <h1>离开麦肯锡后，外面的世界很性感吗？</h1>
                        <p class="text-middle">长春和苏州的获批里程也不算太长。长春为8条线路，总长度135.4公里；苏州4条线路，线路总长137公里。</p>
                        <p class="text-read">
                            <i class="el-icon-star-on"><span>1231</span></i>
                            <i class="el-icon-star-off"><span>1231</span></i>
                        </p>
                    </el-col>
                    <el-col :span="8">
                        <div style="text-align:right">
                            <img src="../../../assets/u1049.png" style="height:120px" alt="">
                        </div>
                    </el-col>
                </el-row>
            </section>
            <section class="footer-container">
                <el-row type="flex" justify="space-around" class="footer-grid">
                    <el-col :span="6" class="footer-box" v-for="(item, index) in footList" :key="index">
                        <el-row type="flex" justify="center">
                            <el-col class="footer-clom"></el-col>
                        </el-row>
                        <p>{{item.name}}</p>
                    </el-col>
                </el-row>
            </section>
        </section>
      </section>
      <section class="template-left">
        <section class="template-box">
            <el-radio v-model="radio1" label="2" class="radio-box">模板二</el-radio>
            <p class="template-index">首页</p>
            <section class="template-box-banner">
                <section class="template-banner">
                    <p>banner</p>
                </section>
            </section>
            <el-row type="flex" justify="space-around" class="template-grid">
                <el-col :span="6" class="grid-box" v-for="(item, index) in dataList2" :key="index">
                    <el-row type="flex" justify="center">
                        <el-col class="grid-clom"></el-col>
                    </el-row>
                    <p>{{item.name}}</p>
                </el-col>
            </el-row>
            <section class="notice-container">
                <p> <i class="el-icon-menu"></i> 公告</p>
                <ul class="notice-ul">
                    <li class="notice-li" v-for="(item, index) in noticeList" :key="index">{{item.content}}</li>
                </ul>
            </section>
            <section class="task-container">
                <el-row type="flex" class="task-row">
                    <el-col :span="12" class="task-col">
                        <el-row type="flex" align="middle">
                            <el-col :span="18">
                                <h3>签到领积分</h3>
                                <p>连续签到领更多积分</p>
                            </el-col>
                            <el-col :span="6" class="task-right">
                                <div style="text-align:right">
                                    <img src="../../../assets/u1049.png" style="height:40px" alt="">
                                </div>
                            </el-col>
                        </el-row>
                    </el-col>
                    <el-col :span="12" class="task-col">
                        <el-row type="flex" align="middle">
                            <el-col :span="18">
                                <h3>做任务赚勋章</h3>
                                <p>海量任务等你来完成</p>
                            </el-col>
                            <el-col :span="6" class="task-right">
                                <div style="text-align:right">
                                    <img src="../../../assets/u1049.png" style="height:40px" alt="">
                                </div>
                            </el-col>
                        </el-row>
                    </el-col>
                </el-row>
            </section>
            <section class="img-container">
                <el-row type="flex">
                    <el-col :span="12" class="img-col">
                        <section class="img-box">
                            <img src="../../../assets/u1049.png" style="height:350px;width:100%" alt="">
                        </section>
                        <section class="text-bootom">
                          <p>离开麦肯锡后，外面的世界很性感吗？</p>
                            <p class="img-read">
                                <i class="el-icon-star-on"><span>1231</span></i>
                                <i class="el-icon-star-off"><span>1231</span></i>
                            </p>
                        </section>

                    </el-col>
                    <el-col :span="12" class="img-col">
                        <section class="img-box">
                            <img src="../../../assets/u1049.png" style="height:350px;width:100%" alt="">
                        </section>
                        <section class="text-bootom">
                          <p>离开麦肯锡后，外面的世界很性感吗？</p>
                            <p class="img-read">
                                <i class="el-icon-star-on"><span>1231</span></i>
                                <i class="el-icon-star-off"><span>1231</span></i>
                            </p>
                        </section>
                    </el-col>
                </el-row>
            </section>
            <section class="footer-container">
                <el-row type="flex" justify="space-around" class="footer-grid">
                    <el-col :span="6" class="footer-box" v-for="(item, index) in footList" :key="index">
                        <el-row type="flex" justify="center">
                            <el-col class="footer-clom"></el-col>
                        </el-row>
                        <p>{{item.name}}</p>
                    </el-col>
                </el-row>
            </section>
        </section>
      </section>
    </section>
  </section>
</template>
<script>
export default {
  name: "Template",
  data() {
    return {
      radio1: "1",
      dataList: [
        {
          name: "活动"
        },
        {
          name: "论坛"
        },
        {
          name: "问卷"
        },
        {
          name: "调查"
        }
      ],
      footList: [
        {
          name: "首页"
        },
        {
          name: "消息"
        },
        {
          name: "我的"
        }
      ],
      noticeList: [
        {
          content: "关于奖励保卫科警员的通报"
        },
        {
          content: "关于成立星联电子高企认定管理工作小组的通知"
        }
      ],
      dataList2: [
        {
          name: "活动"
        },
        {
          name: "论坛"
        },
        {
          name: "问卷"
        },
        {
          name: "调查"
        },
        {
          name: "抽奖"
        },
        {
          name: "订餐"
        },
        {
          name: "待定1"
        },
        {
          name: "待定2"
        }
      ]
    };
  },
  methods: {},
  created() {}
};
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
.enterprises {
  margin: 20px;
  .body {
    background: #fff;
    padding: 20px;
    width: 100%;
    .title {
      background: #f4f6f8;
      font-size: 16px;
      color: #3a3a3a;
      font-weight: 600;
      padding: 10px 20px;
    }
  }
}
.template-container {
  padding-top: 10px;
  display: flex;
  .template-left {
    width: 100%;
    margin-right: 10px;
    background-color: #fff;
    padding: 20px;
  }
  .template-left:last-child {
    width: 100%;
    margin-right: 0;
  }
  .template-box {
    width: 640px;
    text-align: center;
    margin: 0 auto;
    border: 1px solid #ccc;
  }
  .radio-box {
    width: 100%;
    background-color: #fff;
    padding-top: 20px;
  }
  .template-index {
    padding: 40px 0 20px;
    background-color: #fff;
  }
  .template-box-banner{
    background-color: #fff;
    padding: 0 20px;
  }
  .template-banner {
    width: 100%;
    height: 200px;
    background-color: #f2f2f2;
    border: 1px solid #ccc;
    p {
      text-align: center;
      line-height: 200px;
      color: #ccc;
    }
  }
  .grid-box {
    p {
      padding: 10px 0;
    }
  }
  .grid-clom {
    width: 100px;
    height: 100px;
    background-color: #f2f2f2;
    border: 1px solid #ccc;
  }

  .template-grid {
    background-color: #fff;
    padding: 40px 20px 0;
    flex-wrap: wrap;
  }
  .img-text {
    background-color: #fff;
    text-align: left;
    padding: 20px 20px;
  }
  .img-box {
    padding: 0 0 30px;
  }
  .text-middle {
    padding: 10px 0;
  }
  .text-read {
    i {
      padding-right: 20px;
    }
  }
}
.footer-container {
  background-color: #fff;
  .footer-grid {
    padding: 20px 0;
    border-top: 1px solid #ccc;
  }
  .footer-clom {
    width: 60px;
    height: 60px;
    background-color: #f2f2f2;
    border: 1px solid #ccc;
  }
  .footer-box {
    p {
      padding: 10px 0 0;
      font-size: 12px;
    }
  }
}
.notice-container {
  margin: 10px 0 0;
  padding: 0 20px;
  background-color: #fff;
  text-align: left;
  p {
    padding: 10px;
    border-bottom: 1px solid #ccc;
  }
  .notice-ul {
    padding: 20px 10px;
  }
  .notice-li {
    padding: 2px;
    font-weight: 700;
  }
}
.task-container {
  text-align: left;
  padding: 10px 0;
  .task-col {
    padding: 20px;
    background-color: #fff;
    margin-right: 10px;
    p {
      padding: 2px 0;
    }
  }
  .task-col:last-child {
    margin-right: 0;
  }
}
.img-container {
  .img-col {
    // padding:10px;
    width: 100%;
    background-color: #fff;
    margin-right: 10px;
    text-align: left;
  }
  .img-col:last-child {
    margin-right: 0;
  }
  .img-box {
      height: 350px;
  }
  .text-bootom {
      line-height: 30px;
      margin: 10px 0;
      padding: 0 20px;
  }
  .img-read {
      text-align: right;
  }
}
</style>
